<script setup lang="ts">
import {onMounted} from "vue";

onMounted(() => {
  initDeviceList()
})

async function initDeviceList() {
  // let devices = []
  //
  // const data = await getDeviceListApi({})
  // if (data.code == 200) {
  //   devices = data.data.map(m => {
  //     return {
  //       name: m.deviceName || '未知设备',
  //       runtime: Math.ceil(Math.random() * 100),
  //       count: 1,
  //       status: "normal",
  //     }
  //   })
  // }

  // devices.concat(devices)

  // 设备数据
  const devices = [
    {name: "真空熔炼炉", runtime: 2456, count: 8, status: "normal", data: [120, 132, 145, 150, 142, 135, 130]},
    {name: "挤压机", runtime: 1892, count: 5, status: "warning", data: [80, 92, 105, 110, 102, 95, 90]},
    {name: "退火炉", runtime: 756, count: 12, status: "normal", data: [60, 72, 85, 90, 82, 75, 70]},
    {name: "绞线机-1", runtime: 3245, count: 6, status: "normal", data: [150, 162, 175, 180, 172, 165, 160]},
    {name: "绞线机-2", runtime: 1567, count: 10, status: "danger", data: [90, 82, 95, 100, 92, 85, 80]},
    {name: "绞线机-3", runtime: 2893, count: 3, status: "normal", data: [110, 122, 135, 140, 132, 125, 120]},
    {name: "微拉机", runtime: 987, count: 7, status: "warning", data: [70, 82, 95, 100, 92, 85, 80]},
    // 复制一份实现无缝循环
    {name: "真空熔炼炉", runtime: 2456, count: 8, status: "normal", data: [120, 132, 145, 150, 142, 135, 130]},
    {name: "挤压机", runtime: 1892, count: 5, status: "warning", data: [80, 92, 105, 110, 102, 95, 90]},
    {name: "退火炉", runtime: 756, count: 12, status: "normal", data: [60, 72, 85, 90, 82, 75, 70]},
    {name: "绞线机-1", runtime: 3245, count: 6, status: "normal", data: [150, 162, 175, 180, 172, 165, 160]},
    {name: "绞线机-2", runtime: 1567, count: 10, status: "danger", data: [90, 82, 95, 100, 92, 85, 80]},
    {name: "绞线机-3", runtime: 2893, count: 3, status: "normal", data: [110, 122, 135, 140, 132, 125, 120]},
    {name: "微拉机", runtime: 987, count: 7, status: "warning", data: [70, 82, 95, 100, 92, 85, 80]},
  ];

  // 生成列表项
  const listContent = document.getElementById('listContent');

  devices.forEach((device, index) => {
    const item = document.createElement('div');
    item.className = 'list-item';

    // 状态指示类
    let statusClass = '';
    if (device.status === 'warning') statusClass = 'status-warning';
    else if (device.status === 'danger') statusClass = 'status-danger';
    else statusClass = 'status-normal';

    item.innerHTML = `
                <div class="device-name">
                    <span class="status-indicator ${statusClass}"></span>
                    ${device.name}
                </div>
                <div class="runtime">${device.runtime.toLocaleString()} h</div>
                <div class="device-count">${device.count}</div>
            `;

    listContent.appendChild(item);
    // 初始化图表
  });

  // 鼠标悬停时暂停动画
  const listContainer = document.querySelector('.list-container');
  listContainer.addEventListener('mouseenter', () => {
    document.querySelector('.list-content').style.animationPlayState = 'paused';
  });

  listContainer.addEventListener('mouseleave', () => {
    document.querySelector('.list-content').style.animationPlayState = 'running';
  });
}
</script>

<template>
  <div id="left1" class="device-list-panel">
    <div class="corner corner-tl"></div>
    <div class="corner corner-tr"></div>
    <div class="corner corner-bl"></div>
    <div class="corner corner-br"></div>

    <div class="panel-title">设备监控列表</div>

    <div class="list-header">
      <div>设备名称</div>
      <div>运行时间</div>
      <div>设备数量</div>
      <!--        <div>状态图表</div>-->
    </div>

    <div class="list-container">
      <div class="list-content" id="listContent">
        <!-- 列表项将通过JavaScript动态生成 -->
      </div>
    </div>
  </div>
</template>

<style scoped>
/* 主面板容器 */
.device-list-panel {
  width: 21%;
  height: 27%;
  background: rgba(10, 20, 40, 0.7);
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 0 30px rgba(0, 247, 255, 0.3);
  border: 1px solid rgba(0, 247, 255, 0.2);
  position: absolute;
  overflow: hidden;
}

/* 科技感边框效果 */
.device-list-panel::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 1px solid transparent;
  border-image: linear-gradient(
      to right,
      rgba(0, 247, 255, 0),
      rgba(0, 247, 255, 0.8),
      rgba(0, 247, 255, 0)
  ) 1 1;
  pointer-events: none;
}

/* 网格背景 */
.device-list-panel::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: linear-gradient(90deg, rgba(0, 247, 255, 0.1) 1px, transparent 1px) 0 0 / 20px 20px,
  linear-gradient(rgba(0, 247, 255, 0.1) 1px, transparent 1px) 0 0 / 20px 20px;
  pointer-events: none;
  opacity: 0.3;
  z-index: 0;
}

/* 四角装饰 */
.corner {
  position: absolute;
  width: 15px;
  height: 15px;
  border-style: solid;
  border-color: #00f7ff;
  pointer-events: none;
}

.corner-tl {
  top: 0;
  left: 0;
  border-width: 2px 0 0 2px;
}

.corner-tr {
  top: 0;
  right: 0;
  border-width: 2px 2px 0 0;
}

.corner-bl {
  bottom: 0;
  left: 0;
  border-width: 0 0 2px 2px;
}

.corner-br {
  bottom: 0;
  right: 0;
  border-width: 0 2px 2px 0;
}

/* 面板标题 */
.panel-title {
  font-size: 18px;
  margin-bottom: 15px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #00f7ff;
  text-shadow: 0 0 10px rgba(0, 247, 255, 0.7);
  position: relative;
  z-index: 1;
}

/* 表头 */
.list-header {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  padding: 10px 15px;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #00f7ff;
  border-bottom: 1px solid rgba(0, 247, 255, 0.3);
  position: relative;
  z-index: 1;
}

/* 列表容器 */
.list-container {
  height: 300px;
  overflow: hidden;
  position: relative;
}

/* 列表内容 */
.list-content {
  position: absolute;
  width: 100%;
  animation: scroll 30s linear infinite;
}

@keyframes scroll {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-50%);
  }
}
</style>

<style>

/* 列表项 */
.list-item {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  padding: 12px 15px;
  border-bottom: 1px solid rgba(0, 247, 255, 0.1);
  align-items: center;
  transition: all 0.3s ease;
}

.list-item:hover {
  background: rgba(0, 247, 255, 0.1);
  transform: translateX(5px);
}

/* 设备名称 */
.device-name {
  font-weight: bold;
  color: #ffffff;
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
}

/* 运行时间 */
.runtime {
  color: #00ff88;
}

/* 设备数量 */
.device-count {
  color: #00aaff;
}

/* 图表容器 */
.chart-wrapper {
  width: 100%;
  height: 50px;
}

/* 状态指示灯 */
.status-indicator {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 8px;
}

.status-normal {
  background-color: #00ff00;
  box-shadow: 0 0 10px #00ff00;
}

.status-warning {
  background-color: #ffff00;
  box-shadow: 0 0 10px #ffff00;
}

.status-danger {
  background-color: #ff0000;
  box-shadow: 0 0 10px #ff0000;
}

.device-list-panel:hover {
  transform: translateY(-5px) scale(1.02);
  box-shadow: 0 0 30px rgba(0, 247, 255, 0.5);
}
</style>

